/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <sf-form ref="form"
             class="stream-service_form"
             :label-width="120">
        <!-- <div class="stream-service__top">
            <img src="../../../../img/service/stream.png"
                 alt="">
            <div class="name">
                Stream Service
            </div>
        </div> -->
        <div class="form__title">
            <lang>基本信息</lang>
        </div>
        <sf-form-item class="flex-center">
            <sf-fieldlabel>
                <lang>模型名称</lang>
            </sf-fieldlabel>
            <div v-if="!showModelList"
                 class="model-name">
                {{ modelTitle }}
            </div>
            <sf-select
                v-else
                v-model="formData.modelId"
                :default-width="defaultWidth"
                :allow-blank="false"
                :options="modelList" />
        </sf-form-item>
        <sf-form-item>
            <sf-fieldlabel>
                <lang>服务名称</lang>
            </sf-fieldlabel>
            <sf-textfield
                ref="fieldName"
                v-model="formData.name"
                :default-width="defaultWidth"
                :allow-blank="false"
                :utf8-length="false"
                vtype="column_name"
                :blur-trim="true"
                :placeholder="_('请输入服务名称')" />
        </sf-form-item>
        <sf-form-item>
            <sf-fieldlabel>
                <lang>描述</lang>
            </sf-fieldlabel>
            <sf-textarea
                v-model="formData.description"
                :default-width="defaultWidth"
                :max-length="300"
                :utf8-length="false"
                :placeholder="_('选填，不超过300字')" />
        </sf-form-item>
        <div class="form__title">
            <lang>Kafka配置</lang>
        </div>
        <sf-form-item>
            <sf-fieldlabel>
                <lang>BootStrapServer</lang>
            </sf-fieldlabel>
            <sf-textarea
                ref="serverAddr"
                v-model="kafkaBootStrapServers"
                :default-width="defaultWidth"
                :placeholder="
                    _('请输入IP和端口，一行一个\nIP:192.168.1.1:8080')
                "
                :allow-blank="false"
                :validator="_validateIpv4" />
        </sf-form-item>
        <sf-form-item>
            <sf-fieldlabel>
                <lang>Input Topic</lang>
            </sf-fieldlabel>
            <sf-select
                v-model="formData.inputTopic"
                :default-width="defaultWidth"
                :allow-blank="false"
                :allow-input="true"
                vtype="column_name"
                :options="inputTopicList" />
        </sf-form-item>
        <sf-form-item>
            <sf-fieldlabel>
                <lang>Output Topic</lang>
            </sf-fieldlabel>
            <sf-textfield
                ref="fieldName"
                v-model="formData.outputTopic"
                :default-width="defaultWidth"
                :allow-blank="false"
                :utf8-length="false"
                vtype="column_name"
                :blur-trim="true"
                :placeholder="_('请输入Output Topic')" />
        </sf-form-item>
        <div class="form__title blue"
             @click="showHighSet = !showHighSet">
            <lang>高级配置</lang>
            <i
                class="sf-comp-iconfont "
                :class="
                    showHighSet
                        ? 'icon-comp-arrow-right'
                        : 'icon-comp-arrow-down'
                "></i>
        </div>
        <sf-form-item v-if="showHighSet">
            <sf-fieldlabel>
                <lang>配置参数</lang>
            </sf-fieldlabel>
            <sf-textarea
                ref="advancedConfig"
                v-model="formData.advancedParameters"
                :default-width="defaultWidth"
                :placeholder="_('（选填）请输入需调配的参数')" />
        </sf-form-item>
        <div class="form__title">
            <lang>上线配置</lang>
        </div>
        <sf-form-item class="flex-center">
            <sf-fieldlabel>
                <lang>失败自动重启</lang>
            </sf-fieldlabel>
            <sf-radio-group v-model="formData.autoRestart">
                <sf-radio name="autoRestart"
                          :check-value="true">
                    开启
                </sf-radio>
                <sf-radio name="autoRestart"
                          :check-value="false">
                    关闭
                </sf-radio>
            </sf-radio-group>
        </sf-form-item>
        <sf-form-item v-if="formData.autoRestart"
                      class="flex-center">
            <sf-fieldlabel>
                <lang>接入数据类型</lang>
            </sf-fieldlabel>
            <sf-radio-group v-model="formData.realTimeState">
                <sf-radio name="realTimeState"
                          :check-value="false">
                    接入历史数据
                </sf-radio>
                <sf-radio name="realTimeState"
                          :check-value="true">
                    接入实时数据
                </sf-radio>
            </sf-radio-group>
        </sf-form-item>
        <div class="form__title">
            <lang>服务资源配置</lang>
        </div>
        <sf-form-item>
            <sf-fieldlabel>
                <lang>实例个数</lang>
            </sf-fieldlabel>
            <sf-numberfield
                v-model="formData.numExecutors"
                :default-width="defaultWidth"
                :min-value="1"
                :max-value="1000"
                :allow-blank="false"
                :allow-decimals="false"
                :placeholder="_('请输入实例个数')" />
        </sf-form-item>
        <resource-config-form
            ref="defaultResource"
            :default-width="defaultWidth"
            :show-gpu="false"
            :label-name="_('单实例资源分配')"
            :submit-data="resourceData" />
    </sf-form>
</template>
<script lang="ts">
const DEFAULT_WIDTH = 466;
const DEFAULT_VALUE = {
    description: '',
    name: '',
    kafkaBootStrapServers: [],
    outputTopic: '',
    inputTopic: '',
    numExecutors: 1,
    modelId: '',
    modelName: '',
    advancedParameters: '',
    autoRestart:true,
    realTimeState:false
};

interface FormData {
    readableName: string;
    description: string;
    name: string;
    inputTopic: number;
    outputTopic: string;
    advancedParameters: string;
    numExecutors: number;
    modelId: string;
    modelName: string;
    autoRestart: boolean;
    realTimeState: boolean;
}

import resourceConfigForm from 'src/home/mod_cluster/common/common_form/resource_config_form.vue';

import { Component, Vue, Watch } from 'vue-property-decorator';

import multiLineIpValidator from 'src/util/validator/multi_line_ip_validator';

const MUTIL_ES_IP_MAX_LINE = 100;
const MUTIL_IP_NOT_ALLOW =
    '!lookback,!multicast,!broadcast,!classE,!zeroBegin,!zeroEnd,!hostZero,hadPort';
import { multiTrimArr } from 'src/util/format';

import INPUT_TOPIC_LIST from '../const';

@Component({
    components: {
        resourceConfigForm
    }
})
export default class DeployServiceForm extends Vue {
    get defaultWidth () {
        return DEFAULT_WIDTH;
    }

    get inputTopic () {
        return this.formData.inputTopic;
    }

    formData = { ...DEFAULT_VALUE };
    imageList = [];
    resourceData = {
        cpuNum: 1,
        memorySize: 1
    };
    modelTitle = '';
    taskName = '';
    kafkaBootStrapServers = '';
    showHighSet = false;
    inputTopicList = INPUT_TOPIC_LIST;
    modelList = [];
    showModelList = false;

    @Watch('inputTopic')
    inputTopicChange () {
        let outputTopic = INPUT_TOPIC_LIST.filter(
            item => item.value === this.inputTopic
        );
        this.formData.outputTopic = outputTopic.length ?
            outputTopic[0].outValue :
            '';
    }

    _validateIpv4 (value: string) {
        let maxIpLine = MUTIL_ES_IP_MAX_LINE;
        // @ts-ignore
        return multiLineIpValidator(value, maxIpLine, MUTIL_IP_NOT_ALLOW);
    }

    getJsonValue () {
        // @ts-ignore
        this.formData.kafkaBootStrapServers = multiTrimArr(
            this.kafkaBootStrapServers,
            // @ts-ignore
            /\r?\n/
        );
        // @ts-ignore
        this.formData.executorMemory = this.resourceData.memorySize + 'G';
        // @ts-ignore
        this.formData.executorCores = this.resourceData.cpuNum;
        return this.formData;
    }

    setJsonValue (data: FormData) {
        this.showHighSet = !!data.advancedParameters;
        // @ts-ignore
        this.kafkaBootStrapServers = data.kafkaBootStrapServers ?
        // @ts-ignore
            data.kafkaBootStrapServers.join('\n').replace('\\n', ' \n ') :
            '';
        Object.assign(this.formData, data);
    }
}
</script>
<style lang="less">
.stream-service_form {
    padding: 0 32px;
    height: 600px;
    .resource-config__container{
        margin-left: 24px;
    }
    .sfv-switch{
        margin-top: 6px;
    }
    .sfv-switch .sfv-checkbox-input:checked+.sfv-checkbox-wrap{
        background: #204ed9;
    }
    .form__title {
        font-size: 14px;
        margin: 14px 0;
        color: #14161a;
        font-weight: bold;
        &.blue {
            color: #204ed9;
            cursor: pointer;
        }
    }
    .stream-service__top {
        background: url(../../../img/service/stream_hover.png);
        background-size: 100% 100%;
        height: 56px;
        display: flex;
        align-items: center;
        width: 590px;
        margin: 15px 0;
        img {
            width: 40px;
            height: 40px;
            margin: 0 8px 0 16px;
        }
        .name {
            font-size: 14px;
            color: #14161a;
        }
    }
    .sfv-form-item {
        margin-bottom: 10px;
    }
    .flex-center {
        display: flex;
        align-items: center;
        .model-name {
            margin-left: 4px;
            font-weight: bold;
            color: #14161a;
        }
    }
    .sfv-fieldlabel-left {
        padding-left: 0;
    }
    .deploy_service__top {
        border-bottom: 1px solid #dee3ed;
        padding-bottom: 18px;
        display: flex;
        align-items: center;
        color: #5c5c5c;
        margin-bottom: 15px;
        .top__img {
            width: 40px;
            height: 40px;
            margin-right: 8px;
        }
        .top__title {
            font-size: 14px;
            font-weight: bold;
            color: #14161a;
            margin-bottom: 7px;
        }
    }
}
.form-flex {
    display: flex;
}
</style>
